import { h, Component } from 'preact';
import s from './style';
import Modal from '~/components/Modal';
import classNames from 'classnames';
import { VPhone } from '~/utils/validate';
import { getBindCodeAction, bindPhoneNumberAction } from '~/actions/user';
import MessageBox from '~/components/Message';
import store from '~/utils/common/store';
import Loading from '~/components/Loading';
import { connect } from 'preact-redux';
const time = 60;
class Phone extends Component {
	constructor() {
		super();
		this.state = {
			open: true,
			validateText: '获取验证码',
			disabled: false
		};
	}
	onClose = () => {
		const { onClosePhone } = this.props;
		this.setState({
			open: false
		});
		setTimeout(this.onClosePhone,270);
	}
	onClosePhone = () => {
		const { dispatch } = this.props;
		dispatch({
			type:'closePhone'
		});
	}
	onGetValidateCode = () => {
		const { dispatch } = this.props;
		if (!VPhone(this.phone.value)) {
			this.setState({disabled:true});
			dispatch(getBindCodeAction({phoneNumber: this.phone.value}))
			.then(data => {
				this.left = time;
				this.timer();
				this.interval = setInterval(this.timer,1000);
			}).catch(err => {
				MessageBox.show({title:err.errorMsg ||'系统错误'});
				this.setState({
					validateText: '获取验证码',
					disabled: false
				});
			});
		} else {
			MessageBox.show({title:'请输入正确的手机号码'});
		}
	}
	timer = () => {
		this.setState({
			validateText: `${this.left--}s`
		});
		if (this.left === -1) {
			clearInterval(this.interval);
			this.setState({
				validateText: '获取验证码',
				disabled: false
			});
		}
	}
	onSubmit = () => {
		const { dispatch } = this.props;
		if (!VPhone(this.phone.value)) {
			if (!this.validcode.value){
				MessageBox.show({title:'请输入验证码'});
			} else {
				Loading.show();

				dispatch(bindPhoneNumberAction({phoneNumber: this.phone.value, validateCode: this.validcode.value}))
				.then(data => {
					Loading.hide();
					this.onClose();
				}).catch(err => {
					Loading.hide();
					MessageBox.show({title:err.errorMsg ||'系统错误'});
				});
			}
		} else {
			MessageBox.show({title:'请输入正确的手机号码'});
		}
	}
	render() {
		const { onGetValidateCode, onSubmit } = this;
		const { isOpen } = this.props;
		const { open, validateText, disabled } = this.state;
		const style = {
			content: {
				width: '91%',
				overflow:'visible',
				border: '0.28125rem solid #fcbe69',
				'border-bottom': '0.28125rem solid #d29e57',
				right: 'auto'
			}
		};

		const modalProps = {
			isOpen,
			style,
			className:open ? s.wrap : s.close,
			contentLabel:''
		};
		const groupClass = classNames(s.group,"ww");

		const prizeName = 'cosmetic';
		return (
			<Modal { ...modalProps }>
				<div className={s.header}>
					<div className={s.close} onClick={this.onClose}><i className="icon-close-a" /></div>
					<div className={s.title}>活动规则</div>
				</div>
				<div className={s.body}>
					<div className={s.text}>绑定手机，马上拿积分抽大奖！</div>
					<div className={s.inputBox}>
						<div className={groupClass}>
							<input type="phone" placeholder="请输入手机号码" maxLength="11" ref={ref =>{ this.phone = ref;}} className={s.phoneInput} />
						</div>
						<div className={groupClass}>
							<input type="text" placeholder="请输入验证码" ref={ref =>{ this.validcode = ref;}} className={s.validcodeInput}/>
							<button onClick={onGetValidateCode} disabled={disabled} className={s.validbutton}>{validateText}</button>
						</div>
					</div>
					<div className={groupClass}>
						<button className={s.submitbutton} onClick={onSubmit}>确定</button>
					</div>
				</div>
			</Modal>
		);
	}
}

export default connect()(Phone);
